<template>
  <div id="components-layout-demo-custom-trigger">
    <v-layout>
      <v-sider collapsible :collapsed="customCollapsed" :trigger="false" :collapsed-width="64">
        <div class="logo"></div>
        <v-menu theme="dark" mode="inline" :data="themeMenuData" @item-click="itemClick">
          <template scope="{data}">
            <i v-if="data.icon" :class="'anticon anticon-' + data.icon"></i>
            <span class="nav-text">{{data.name}}</span>
          </template>
        </v-menu>
      </v-sider>
      <v-layout>
        <v-header :style="{ background: '#fff', padding: 0 }">
          <v-icon class="trigger" :type="this.customCollapsed ? 'menu-unfold' : 'menu-fold'" @click.native="toggle"></v-icon>
        </v-header>
        <v-content :style="{ padding: '0 12px' }">
          <v-breadcrumb :style="{ margin: '10px 0' }">
            <v-breadcrumb-item>Home</v-breadcrumb-item>
            <v-breadcrumb-item href="">List</v-breadcrumb-item>
            <v-breadcrumb-item href="">App</v-breadcrumb-item>
          </v-breadcrumb>
          <div style="padding: 10px; background: #fff; min-height: 100vh;">
            <router-view></router-view>
          </div>
        </v-content>
        <v-footer :style="{ textAlign: 'center' }">
          Ant Design ©2016 Created by Ant UED
        </v-footer>
      </v-layout>
    </v-layout>
  </div>
</template>

<style>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 16px;
  cursor: pointer;
  transition: color .3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #108ee9;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: #333;
  border-radius: 6px;
  margin: 16px;
}

#components-layout-demo-custom-trigger .ant-layout-sider-collapsed .anticon {
  font-size: 16px;
}

#components-layout-demo-custom-trigger .ant-layout-sider-collapsed .nav-text {
  display: none;
}
</style>

<script>
export default {
  data () {
    return {
      customCollapsed: false,
      themeMenuData: [],
      themeMenuData1: [{
        name: '系统管理',
        icon: 'appstore',
        children: [{
          name: '系统列表',
          routename: 'SystemsList'
        },
        {
          name: '添加系统',
          routename: 'SystemsCreate'
        },
        {
          name: '系统角色',
          routename: 'SystemsRoles'
        }
        ]
      },
      {
        name: '角色管理',
        icon: 'usergroup-add',
        children: [{
          name: '角色列表',
          routename: 'RolesList'
        },
        {
          name: '添加角色',
          routename: 'RolesCreate'
        }
        ]
      },
      {
        name: '管理员',
        icon: 'user',
        children: [{
          name: '管理员列表',
          routename: 'AdminsList'
        },
        {
          name: '添加管理员',
          routename: 'AdminsCreate'
        }
        ]
      },
      {
        name: '节点管理',
        icon: 'user',
        children: [{
          name: '节点列表',
          routename: 'NodesList'
        },
        {
          name: '添加节点',
          routename: 'NodesCreate'
        }
        ]
      },
      {
        name: '权限管理',
        icon: 'safety',
        children: [{
          name: '权限列表',
          routename: 'PermissionsList'
        },
        {
          name: '添加权限',
          routename: 'PermissionsCreate'
        }
        ]
      }
      ]
    }
  },
  mounted () {
    this.getMenus()
  },
  methods: {
    getMenus () {
      this.$http.post('/rbac/menu/get', {system_key: 'b84c434e823236c93ddfef26fda1b2e4'}).then(res => {
        this.themeMenuData = res.data
      })
    },
    toggle () {
      this.customCollapsed = !this.customCollapsed
    },
    itemClick (item) {
      item.forEach(route => {
        if (route.selected === true) {
          this.$router.push({
            name: route.routename
          })
        }
      }, this)
    }
  }
}
</script>
